
<template>
  <div class="w-100 " style="height: 90%;">



      <div
        id="year_work"
        class="w-100 "
        style="height: 100%; position: relative"
      ></div>
   
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import {useOptions} from '@/hook/useOptions'


const xAxisData = useOptions().month
const seriesData = [13, 20, 30, 40, 20, 20,36, 25, 34, 21,6,8,5]

let option = {
  grid: {
    top: "10%",
    left: "10%",
    right: "5%",
    bottom: "20%",
  },
tooltip: {
  show: true,
  trigger: 'axis',
  axisPointer: {
    type: 'line'
  },
  textStyle:{
    fontSize:12
  },
  formatter: '数量：{c}个'
},
xAxis: {
  type: 'category',
  data: xAxisData,
  // x轴文字
  axisLabel: {
    textStyle: {
      fontSize: 20,
      color: "#667A8E",
    },
  },
  // x轴
  axisLine: {
    show: true,
    lineStyle: {
      width: 2,
      color: 'rgba(255,255,255,0.6)',
    },
  },
  // x轴刻度
  axisTick: {
    show: false
  }
},
yAxis: {
  type: 'value',
  // y轴 文字
  axisLabel: {
    textStyle: {
      fontSize: 20,
      color: "#667A8E",
    },
  },
  // y轴
  axisLine: {
    show: false,
    textStyle: {
          fontSize: 20,
          fontFamily: "OPPOSans-Regular",
          color: "rgba(108, 128, 151, 1)",
        },
  },
  // y轴横向 标线 
  splitLine: {
    show: true,
    lineStyle: {
      color: 'rgba(255,255,255,0.16)',
    },
  },
},
series: [
  {
    data: seriesData,
    type: 'line',
    lineStyle: {
      color: '#FFD000',
    },
    // 点
    itemStyle: {
      color: '#FFD000'
    },
    // 平滑 属性
    smooth: true,
    symbol: 'emptyCircle',
    // 区域黄色渐变效果
    areaStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [{
            offset: 0,
            color: 'rgba(255, 214, 62, 0.70)'
          },
            {
              offset: 1,
              color: 'rgba(255, 214, 62, 0.10)'
            }
          ],
          false
        ),
        shadowColor: 'rgba(255, 214, 62, 0.10)',
        shadowBlur: 10
      }
    },
  },

]

};

let myChart: any;
onMounted(() => {
   myChart = echarts.init(document.getElementById("year_work") as HTMLElement);

  myChart.setOption(option);
});
onBeforeUnmount(() => {
  // 销毁 ECharts 实例
  if (myChart) {
    myChart.dispose();
  }
});
</script>

<style></style>
